<template>
  <div class="task-detail-container">
    <Breadcrumb :show-back="false">
      <template #bread-name> 选题篮</template>
      <template #more-content-right>
        <div class="edit-score flex" @click="openScoreDrawer">
          <img
            class="edit-icon"
            src="@/assets/images/assignment/edit-1.png"
            alt=""
          />
          修改分值
        </div>
      </template>
      <template #bread-right>
        <div class="btn-box">
          <el-button type="primary" class="gen-paper-btn" @click="onGenPaper"
            >生成试卷</el-button
          >
          <el-button type="primary" class="submit-btn" @click="onPublish"
            >发布</el-button
          >
        </div>
      </template>
    </Breadcrumb>
    <main class="content flex-between">
      <div class="content-left">
        <template v-for="(question, index) in taskStore.taskList" :key="index">
          <AssignTopic
            v-if="question.question_detail"
            :index="index + 1"
            :topic-data="question.question_detail"
            :score="question.totalScore"
            :showScore="true"
            :is-relation="!!question.relation_id"
          >
          </AssignTopic>
        </template>

        <el-empty v-if="taskStore.taskList.length === 0"></el-empty>
      </div>
      <div class="content-right">
        <div class="flex-between">
          <span class="title">目录</span>
          <div class="flex btn-list">
            <el-form-item label="" label-position="top">
              <el-radio-group v-model="sortType">
                <el-radio value="1">题型顺序</el-radio>
                <el-radio value="2">选题顺序</el-radio>
              </el-radio-group>
            </el-form-item>
            <div class="btn hover flex" @click="onClear">
              <img src="@/assets/images/assignment/trash.png" class="btn-img" />
              清空
            </div>
          </div>
        </div>
        <div class="tip-text">
          长按拖动{{ sortType === '1' ? '题型或' : '' }}题号调整顺序
        </div>
        <template v-if="sortType === '1'">
          <VueDraggable
            v-model="typeList"
            :animation="150"
            ghostClass="ghost"
            class="box-list flex-column"
            group="question-box"
            @end="onSort"
          >
            <div
              class="question-box"
              v-for="(typeItem, typeIndex) in typeList"
              :key="typeItem.type"
            >
              <div class="question-title">
                {{ getNumHan(typeIndex + 1) }}、{{
                  questionTypeMap[typeItem.type]
                }}
              </div>
              <VueDraggable
                v-model="typeItem.list"
                :animation="150"
                ghostClass="ghost"
                class="question-index-list flex"
                group="question-index"
                @end="onSort"
              >
                <div
                  class="index-item"
                  v-for="(item, index) in typeItem.list"
                  :key="item.topic_id"
                >
                  {{
                    typeIndex > 0 ? getTypeIndex(typeIndex, index) : index + 1
                  }}
                </div>
              </VueDraggable>
            </div>
          </VueDraggable>
        </template>
        <template v-else>
          <VueDraggable
            v-model="taskStore.taskList"
            :animation="150"
            ghostClass="ghost"
            class="question-index-list flex"
            group="question-index"
            @end="onOrderSort"
          >
            <div
              class="index-item"
              v-for="(item, index) in taskStore.taskList"
              :key="item.topic_id"
            >
              {{ index + 1 }}
            </div>
          </VueDraggable>
        </template>
      </div>
    </main>
  </div>
  <el-drawer class="sort-drawer" v-model="drawerVis">
    <div class="font-weight title">题目设置</div>
    <el-form-item label="题目排序：" label-position="top">
      <el-radio-group v-model="sortType">
        <el-radio value="1">题型顺序</el-radio>
        <el-radio value="2">选题顺序</el-radio>
      </el-radio-group>
    </el-form-item>
    <template #footer>
      <el-button type="danger"> 确定 </el-button>
    </template>
  </el-drawer>
  <SettingDrawer v-if="showDrawer" v-model:visible="showDrawer" />
</template>

<script setup>
import { useTaskStore } from '@/stores'
import { ref, watch } from 'vue'
import { questionTypeMap, getNumHan } from '@/constants'
import { VueDraggable } from 'vue-draggable-plus'
import { iframeTaskMitt } from '@/utils/tools/bus'
import AssignTopic from '../components/AssignTopic.vue'
import SettingDrawer from './SettingDrawer.vue'
import { ElMessage } from 'element-plus'

const sortType = ref('1')
const drawerVis = ref(false)

const taskStore = useTaskStore()
const typeList = ref([])

const showDrawer = ref(false)
// 打开更改分值抽屉
const openScoreDrawer = () => {
  if (!taskStore.taskList.length) {
    ElMessage.error('请先选择习题！')
    return
  }
  showDrawer.value = true
}

const onGenPaper = () => {
  iframeTaskMitt.emit('on-publish-or-gen-paper', 'genPaper')
}

const onPublish = () => {
  iframeTaskMitt.emit('on-publish-or-gen-paper', 'publish')
}

const onClear = async () => {
  await taskStore.reset()
  window.close()
}

const getTypeIndex = (typeIndex, index) => {
  let count = 0
  typeList.value.slice(0, typeIndex).forEach(item => {
    count += item.list.length
  })
  return count + index + 1
}
const iniTypeQuestion = () => {
  typeList.value = []
  taskStore.taskList.forEach(question => {
    let index = typeList.value.findIndex(
      item => item.type === question.topic_type
    )
    if (index !== -1) {
      typeList.value[index].list.push(question)
    } else {
      typeList.value.push({
        type: question.topic_type,
        list: [question]
      })
    }
  })
}

const onSort = () => {
  let list = []
  typeList.value.forEach(item => {
    list = [...list, ...item.list]
  })
  taskStore.resetAll(list)
}

const onOrderSort = () => {
  taskStore.resetAll(taskStore.taskList)
}

watch(
  () => taskStore.taskList,
  () => {
    iniTypeQuestion()
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<style lang="less" scoped>
.task-detail-container {
  .edit-score {
    .edit-icon {
      width: 20px;
    }
    gap: 8px;
    cursor: pointer;
    color: #4d88ff;
    font-size: 18px;
  }
  .btn-box {
    .gen-paper-btn,
    .submit-btn {
      width: 100px;
      height: 40px;
      border-radius: 6px;
    }
    .gen-paper-btn {
      border-color: #428fff;
      color: #428fff;
      background-color: #fff;
      &:hover {
        background-color: #ecf5ff;
      }
    }
    .submit-btn {
      &:hover {
        background-color: #7381e9;
      }
    }
  }
  .content {
    margin-top: 20px;
    gap: 20px;
    align-items: flex-start;
    .content-left {
      width: 70%;
    }
    .content-right {
      flex: 1;
      position: sticky;
      height: 100%;
      top: 0;
      background-color: #fff;
      padding: 20px;
      .title {
        font-size: 20px;
      }
      .tip-text {
        color: rgba(4, 11, 26, 0.6);
        margin-top: 6px;
      }
      .btn-list {
        gap: 20px;
        .btn {
          gap: 4px;
          color: @color-brand-regular;
          .btn-img {
            width: 18px;
          }
        }
      }
      .box-list {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
        gap: 30px;
        margin-top: 10px;
        .question-box {
          padding: 20px;
          border-radius: 10px;
          border: 1px dashed #adc8ffb2;
        }
      }
      .question-index-list {
        margin-top: 12px;
        flex-wrap: wrap;
        gap: 16px;
        .index-item {
          background: #f5f6ff;
          border: 1px solid #e6e8f9;
          line-height: 1.6;
          text-align: center;
          width: 26px;
          border-radius: 4px;
        }
      }
    }
  }
  :deep(.el-form-item) {
    margin-bottom: unset;
    .el-radio {
      margin-right: 10px;
    }
    .el-radio__label {
      font-size: @size-big;
    }
  }
}
.sort-drawer {
  .title {
    margin-bottom: 10px;
  }
}
</style>

<!-- eslint-disable -->
<style lang="less">
.sort-drawer {
  .el-drawer__header {
    margin-bottom: unset !important;
  }
  .el-drawer__body {
    padding-top: 0px;
  }
}
</style>
